<template>
  <div class="mine">
    <van-nav-bar title="个人中心" class="nav_bar" right-text="编辑"  @click-right="onClickRight" />
    <!-- {{getInfo}} -->

    <div class="content">
      <img :src="getInfo.avaUrl" alt="">
      <p>{{getInfo.name}}</p>
      <p>{{getInfo.phone}}</p>
      <mt-button class="tui_btn" type="primary" @click="logOut()">退出登录</mt-button>
    </div>
    <div>
    <van-grid :border="false" :column-num="3">
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
      </van-grid-item>
</van-grid>
    </div>
    
  </div>
</template>

<script>
import { Grid, GridItem } from 'vant';
import url from '../tools/url'
export default {
  name: 'Mine',
  data () {
    return {
      
    }
  },
  methods: {
    //编辑
    onClickRight(){
      console.log(this.getInfo);
      this.$router.push({path:"/edit",query:{id:this.getInfo.id}});
    },
    //退出
    logOut(){
      var token = sessionStorage.getItem("token");
      var str = `token=${token}`;
      this.axios.post("api3"+url.LOGOUT,str).then(res=>{
        console.log(res);
        if(res.data.code == 200){
          //1.清楚浏览器的token
          sessionStorage.removeItem("token");
          //2.跳转至登录页
          this.$router.push("/login")
        }else{

        }
      })

    }
  },
  computed: {
    getInfo(){
      return this.$store.state.info;
    } 
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.nav_bar{
  background: #f08f72;
}
.nav_bar{
  color: black  !important;
}
.content{
  text-align: center;
}
.tui_btn{
  float: right;
  margin-top: 374px;
}
</style>
